<template>
  <el-row style="width: 100%;">
    <!--    简报 左侧-->
    <el-col :span="16" style="height: 536px;overflow-y: scroll">
      <el-row class="jianbao">
        <el-col class="jianbao2">
          <el-row style="margin-left: 50px">
            <el-col :span="4">
              简报
            </el-col>
            <el-col :span="5">
              新增客户
            </el-col>
            <el-col :span="5">
              新增商机
            </el-col>
            <el-col :span="5">
              新增订单
            </el-col>
            <el-col :span="5">
              新增日志
            </el-col>
          </el-row>
        </el-col>
        <el-row style="margin-left: 50px">
          <el-col :span="4">
            今日新增
          </el-col>
          <el-col :span="5" v-for="(num,index) in saveNumList" :key="index">
            {{num.days}}
          </el-col>
        </el-row>
        <el-row style="margin-left: 50px">
          <el-col :span="4">
            本周新增
          </el-col>
          <el-col :span="5" v-for="(num,index) in saveNumList" :key="index">
            {{num.weeks}}
          </el-col>
        </el-row>
        <el-row style="margin-left: 50px">
          <el-col :span="4">
            本月新增
          </el-col>
          <el-col :span="5" v-for="(num,index) in saveNumList" :key="index">
            {{num.mons}}
          </el-col>
        </el-row>
      </el-row>
      <!--    进度-->
      <div class="jindu" v-if="postLevel==1">
        <el-row style="margin-left: 50px;">
          <el-col :span="4">
            历史收款金额
          </el-col>
          <el-col :span="5">
            当日收款金额
          </el-col>
          <el-col :span="5">
            本周收款金额
          </el-col>
          <el-col :span="5">
            本月收款金额
          </el-col>
          <el-col :span="5">
            全年收款总额
          </el-col>
        </el-row>
        <el-row style="margin-left: 50px;margin-top: 10px;margin-bottom:10px">
          <el-col :span="4">
            <countTo ref='example' prefix="￥" :startVal='startVal' :endVal='ctsList[0].alls' :duration='4000'></countTo>
          </el-col>
          <el-col :span="5">
            <countTo ref='example' prefix="￥" :startVal='startVal' :endVal='ctsList[0].days' :duration='3000'></countTo>
          </el-col>
          <el-col :span="5">
            <countTo ref='example' prefix="￥" :startVal='startVal' :endVal='ctsList[0].weeks' :duration='3000'></countTo>
          </el-col>
          <el-col :span="5">
            <countTo ref='example' prefix="￥" :startVal='startVal' :endVal='ctsList[0].mons' :duration='3000'></countTo>
          </el-col>
          <el-col :span="5">
            <countTo ref='example' prefix="￥" :startVal='startVal' :endVal='ctsList[0].years' :duration='4000'></countTo>
          </el-col>
        </el-row>
      </div>
      <!--    统计图-->
      <!--<div style="background: white;margin-top: 5px;border: 1px solid lightgray;">
        <el-row style="margin-top: 20px;margin-left:50px;color: #4FA1E4">近七天新增统计</el-row>
        <div id="all" style="height: 550px;margin-bottom: 10px">
        </div>
      </div>-->
      <!--    漏斗-->
      <!--<div>

      </div>-->
      <!--    客户所在省统计-->
      <el-row>
        <div class="china" ref="allChinas"></div>
      </el-row>
    </el-col>
<!--    右侧 日志-->
    <el-col :span="8">
      <div style="border: 1px solid lightgray;background: white;margin-left:10px;box-shadow: #ccc 0px 0px 10px">
        <el-row style="margin-left: 20px;margin-top: 10px;margin-bottom: 10px">工作圈</el-row>
        <el-row style="width:350px;margin-left: 20px;margin-top: 10px;margin-bottom: 10px">
          <el-tabs v-model="activeName">
            <el-tab-pane label="全部动态" name="first">
              <div style="height: 419px;overflow-y: scroll;margin-top: 10px">
                <el-row v-for="mylog in mylogList" :key="mylog.id" style="margin-bottom: 15px;margin-left: 10px">
                  <el-col :span="6">
                    <img :src="mylog.empId.empImgpath" style="border-radius:50%;width:45px;height:45px;">
                  </el-col>
                  <el-col :span="16">
                    <span style="color: #4FA1E4;font-size: 14px;">{{mylog.empId.empName}}&nbsp;&nbsp;({{mylog.empId.positionList[0].postName}})&nbsp;&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                    <span style="font-size: 14px;">{{mylog.content}}</span>
                    <el-row style="margin-bottom: 10px;margin-top: 10px;font-size: 12px">
                      {{mylog.workTime | formatDate}}
                    </el-row>
                    <el-row style="margin-bottom: 10px;font-size: 14px;color: #4FA1E4">
<!--                      C_20200609-0230-->
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
            <el-tab-pane label="客户相关" name="second">
              <div style="height: 419px;overflow-y: scroll;margin-top: 10px">
                <el-row v-for="mylog in mylogList" :key="mylog.id" style="margin-left: 10px">
                  <span v-if="mylog.type=='客户'">
                    <el-col :span="6">
                      <img :src="mylog.empId.empImgpath" style="border-radius:50%;width:45px;height:45px;">
                    </el-col>
                    <el-col :span="16">
                      <span style="color: #4FA1E4;font-size: 14px;">{{mylog.empId.empName}}&nbsp;&nbsp;({{mylog.empId.positionList[0].postName}})&nbsp;&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                      <span style="font-size: 14px;">{{mylog.content}}</span>
                      <el-row style="margin-bottom: 10px;margin-top: 10px;font-size: 12px">
                        {{mylog.workTime | formatDate}}
                      </el-row>
                      <el-row style="margin-bottom: 10px;font-size: 14px;color: #4FA1E4">
<!--                        C_20200609-0230-->
                      </el-row>
                    </el-col>
                  </span>
                </el-row>
              </div>
            </el-tab-pane>
            <el-tab-pane label="商机相关" name="third">
              <div style="height: 419px;overflow-y: scroll;margin-top: 10px">
                <el-row v-for="mylog in mylogList" :key="mylog.id" style="margin-left: 10px">
                  <span v-if="mylog.type=='商机'">
                    <el-col :span="6">
                      <img :src="mylog.empId.empImgpath" style="border-radius:50%;width:45px;height:45px;">
                    </el-col>
                    <el-col :span="16">
                      <span style="color: #4FA1E4;font-size: 14px;">{{mylog.empId.empName}}&nbsp;&nbsp;({{mylog.empId.positionList[0].postName}})&nbsp;&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                      <span style="font-size: 14px;">{{mylog.content}}</span>
                      <el-row style="margin-bottom: 10px;margin-top: 10px;font-size: 12px">
                        {{mylog.workTime | formatDate}}
                      </el-row>
                      <el-row style="margin-bottom: 10px;font-size: 14px;color: #4FA1E4">
<!--                        C_20200609-0230-->
                      </el-row>
                    </el-col>
                  </span>
                </el-row>
              </div>
            </el-tab-pane>
            <el-tab-pane label="日志相关" name="fourth">
              <div style="height: 419px;overflow-y: scroll;margin-top: 10px">
                <el-row v-for="mylog in mylogList" :key="mylog.id" style="margin-left: 10px">
                  <span v-if="mylog.type=='日志'">
                    <el-col :span="6">
                      <img :src="mylog.empId.empImgpath" style="border-radius:50%;width:45px;height:45px;">
                    </el-col>
                    <el-col :span="16">
                      <span style="color: #4FA1E4;font-size: 14px;">{{mylog.empId.empName}}&nbsp;&nbsp;({{mylog.empId.positionList[0].postName}})&nbsp;&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                      <span style="font-size: 14px;">{{mylog.content}}</span>
                      <el-row style="margin-bottom: 10px;margin-top: 10px;font-size: 12px">
                        {{mylog.workTime | formatDate}}
                      </el-row>
                      <el-row style="margin-bottom: 10px;font-size: 14px;color: #4FA1E4">
<!--                        C_20200609-0230-->
                      </el-row>
                    </el-col>
                  </span>
                </el-row>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  import {formatTimeToStr} from '@/assets/format'
  import china from 'echarts/map/json/china.json'
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    name: 'ShouYe',
    data:function(){
      return{
        chinaList:[],//当前登录员工的客户分布
        user:{},//当前登录员工对象
        percentage: 20,
        customColor: '#409eff',
        activeName:'first',
        mylogList:[],//日志集合
        ctsList:[],//回款集合
        saveNumList:[],//新增客户、商机、订单、日志数量
        postLevel:'',//是否是一级员工
        deptId:'',
        // 初始值
        startVal: 0,
        // 最终值
        endVal: 0,
      }
    },
    created:function () {
      this.authentication();
      // 获取当前登录员工对象
      this.user = JSON.parse(sessionStorage.getItem('user'));
      this.saveNum(this.user.employeesId);////新增客户、商机、订单、日志数量
      this.selectCts(this.user.employeesId);//查询回款
      this.china(this.user.employeesId);//当前登录员工的客户分布
      this.myLog(this.user.employeesId)
    },
    methods:{
      //验证用户身份
      authentication(){
        var id = JSON.parse(sessionStorage.getItem('user')).employeesId;//用户id
        //获取用户是否是一级角色
        this.$axios.get("http://localhost:8088/is_one_Role",{params:{empId:id}})
          .then(v=> {
            this.postLevel=v.data.postLevel
            this.deptId = v.data.deptId;//记录部门id
          }).catch();
      },
      start() {
        this.$refs.example.start();
      },
      // 查询回款
      selectCts(empId){
        this.$axios.get("http://localhost:8088/vue/serch-cts",{params:{empId:empId}})
        .then(v=>{
          this.ctsList=v.data
        }).catch()
      },
      saveNum(empId){
        this.$axios.get("http://localhost:8088/vue/save-num",{params:{empId:empId}})
        .then(v=>{
          this.saveNumList=v.data
        }).catch()
      },
      // 当前登录员工的操作日志
      myLog(empId){
        this.$axios.get("http://localhost:8088/vue/select-mylog",{params:{empId:empId}})
        .then(v=>{
          this.mylogList=v.data
        }).catch()
      },
      // 客户分布图
      china(empId){
        this.$axios.get("http://localhost:8088/vue/china",{params:{empId:empId}})
          .then(v=>{
            this.chinaList=v.data
          }).catch()
      },
      // 统计
      /*number(){
        let elementByid = document.getElementById('all')
        let myChart = this.$echarts.init(elementByid)
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            color: ["#F58080", "#47D8BE", "#F9A589","#00A2FF"],
            data: ['新增客户数量', '新增联系人数量', '新增商机数量','新增订单数量'],
            left: 'center',
            bottom: 'bottom'
          },
          grid: {
            top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '3%',
            height: '80%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['2020-6-1','2020-6-2','2020-6-3','2020-6-4','2020-6-5','2020-6-6'],//查询年月
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#DDD'
              }
            },
            nameTextStyle: {
              color: "#999"
            },
          },
          series: [{
            name: '新增客户数量',
            type: 'line',
            data: [200,900,220,130,660,289],
            color: "#F58080",
            lineStyle: {
              normal: {
                color: '#FFCAD4'
              }
            },
            smooth: true
          },
            {
              name: '新增联系人数量',
              type: 'line',
              data: [103,568,111,222,123,56],
              lineStyle: {
                normal: {
                  color: '#AAF487' ,
                }
              },
              smooth: true
            },
            {
              name: '新增商机数量',
              type: 'line',
              data: [125,568,25,36,784,56],
              lineStyle: {
                normal: {
                  color: '#F6D06F'  ,
                }
              },
              smooth: true
            },
            {
              name: '新增订单数量',
              type: 'line',
              data: [12,568,25,36,884,56],
              lineStyle: {
                normal: {
                  color: '#00A2FF'  ,
                }
              },
              smooth: true
            }
          ]
        };
        myChart.setOption(option)
      },*/
      // 客户分布图
      allChina() {
        let myChart = this.$echarts.init(this.$refs.allChinas);
        this.$echarts.registerMap('china',china)
        //数据格式如下,中文名称要一致,value为数字类型,字符串的数字也可以
        var mapData = this.chinaList;
        let option = {
          title: {
            text: '全国客户分布图',
            subtext: '',
            itemGap: 10,
            left: 'center',
            textStyle: {
              color: '#000',
              fontStyle: 'normal',
              fontWeight: 'bold',
              fontSize: 25
            },
            subtextStyle: {
              color: '#58d9df',
              fontStyle: 'normal',
              fontWeight: 'bold',
              fontSize: 16
            }
          },

          tooltip: {//悬停出现人数
            trigger: 'item',
            formatter: function(e) {
              var name = e.name ? e.name : '获取中';
              var value = e.value ? e.value : '暂无数据'
              if(value=='暂无数据'){
                return `${name}:${value}`
              }
              return `${name}:${value}`+"人"
            }
          },

          visualMap: {
            min: 0,
            max: 10,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true,
            inRange: {
              color: ['#ffffff', '#E0DAFF', '#ADBFFF', '#9CB4FF', '#6A9DFF', '#3889FF']
            }
          },
          toolbox: {
            show: false,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              dataView: {
                readOnly: false
              },
              restore: {},
              saveAsImage: {}
            }
          },

          geo: {
            map: 'china',
            zoom: 1.2,
            label: {
              normal: {
                show: true,
                color: '#c1c4c8'
              },
              emphasis: {
                show: false,
                color: '#292929'
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#fbfbfb',
                borderColor: '#b9b4b7'
              },
              emphasis: {
                areaColor: '#05ff09'
              }
            }
          },
          series: [{
            type: 'map',
            mapType: 'china',
            geoIndex: 0,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: mapData
          }]
        };
        myChart.setOption(option);
      },
    },
    mounted () {
      // setTimeout(()=>{this.number()},500);
      setTimeout(()=>{this.allChina()},500);
    },
    filters: {// 日期格式化
      formatDate: function (time) {
        if (time != null && time != '') {
          var date = new Date(time)
          return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
        } else {
          return ''
        }
      }
    },
  }
</script>

<style scoped>
  .jianbao{
    background: white;
    border: 1px solid lightgray;
    box-shadow:#ccc 0px 0px 10px;
    font-size: 15px;
  }

  .jianbao .el-row{
    margin-bottom: 10px;
  }

  .jianbao2{
    border-bottom: 1px solid lightgray;
    padding-top: 5px;
    margin-bottom: 10px;
  }

  .jindu{
    background: white;
    margin-top: 5px;
    border: 1px solid lightgray;
    padding-top: 10px;
    box-shadow:#ccc 0px 0px 10px;
    font-size: 15px;
  }

  .china{
    height:550px;
    margin-top:5px;
    background: white;
    padding-top: 20px;
    border: 1px solid lightgray;
  }
</style>
